<template>
    <div class="cinema-container">
        <div class="city-search">
            <div><span>广州</span><i></i></div>
            <div class="mui-input-row mui-search">
				<input type="search" class="mui-input-clear" placeholder="搜电影、影院" @click="getSearch">
			</div>
        </div>
        <div class="cinema">
            <ul class="list-data">
                <router-link :to="'/cinema/'+item.id" v-for="item in cinemaList" :key="item.id"  tag="li">
                    <div>
                        <span class="span1">
                            <span>{{item.nm}}</span><span>{{item.sellPrice}}</span>元起
                        </span>
                        <span class="span2">{{item.addr}}</span>
                        <span class="span3" v-if="item.promotion.cardPromotionTag"><img src="../../images/ka.png">{{item.promotion.cardPromotionTag}}</span>
                        <span class="span4">近期场次:{{item.showTimes}}</span>
                    </div>
                    <span class="span5">{{item.distance}}</span>
                </router-link>
            </ul>
            <!-- <div class="loading" v-show="maxCinema">
                <mt-spinner color="rgb(100, 100, 100)" type="fading-circle"></mt-spinner>
            </div> -->
        </div>
    </div>
</template>
<script>
import qs from "qs";
import { Search } from 'mint-ui';
import mui from '../../lib/js/mui.min.js'
export default {
    data(){
        return{
            cinemaList:[]
        }
    },
    created(){
        this.$store.commit("changeTitle","影院");
        this.getCinemaList()
    },
    mounted(){
        mui(".mui-input-row input").input()
    },
    methods:{
        getCinemaList(){
            this.axios.post("/movie",
                 qs.stringify({
                    day:"2019-09-22",
                    offset:0,
                    limit:20,
                    districtId:-1,
                    lineId:-1,
                    hallType:-1,
                    brandId:-1,
                    serviceId:-1,
                    areaId:-1,
                    stationId:-1,
                    item:"",
                    updateShowDay:true,
                    reqId:new Date().getTime(),
                    cityId:20
                 })
            ).then(result=>{
                this.maxCinema = result.data.cinemas.length
                if(result.data.cinemas.length!=0){
                    console.log(result)
                    this.cinemaList = result.data.cinemas
                    console.log(this.cinemaList)
                }
            })

        },
        getSearch(){
            this.$router.push({path:'/search'})
        }
    }
}
</script>
<style lang="scss" scoped>
input[type=search]{
    background-color: #fff;
}
.mui-search{
    margin-top: 15px;
    width: 80%;
}
.cinema-container{
    .city-search{
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: rgb(241, 241, 241);
        padding: 0 20px;
        i{
            margin-right: 5px;
            width: 0;
            height: 0;
            border: 4px solid #b0b0b0;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            display: inline-block;
            margin-left: 4px;
            margin-top: 5px;
        }
    }
    .cinema{
        .mui-active{
            color: red;
            border-color: red;
        }
        .list-data{
            list-style: none;
            margin: 0;
            padding: 0;
            li{
                padding: 10px 15px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                div{
                    width: 280px;
                    display: flex;
                    flex-direction: column;
                    .span1{
                        direction: flex;
                        justify-content: space-between;
                        font-size:12px;
                        white-space:nowrap; 
                        color: red;
                        :nth-child(1){
                            font-size: 16px;
                            font-weight: bold;
                            color: #333;
                        }
                        :nth-child(2){
                            font-size: 18px;
                            color:red;
                            margin-left: 5px;
                        }
                    }
                    .span2{
                        font-size: 12px;
                        width: 100%;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                        color: rgb(121, 120, 120);
                    }
                    .span3{
                        font-size: 14px;
                        display: flex;
                        align-items: center;
                        color: rgb(138, 138, 138);
                        img{
                            width: 20px;
                            height: 20px;
                            margin-right: 3px;
                        }
                    }
                    .span4{
                        font-size: 12px;
                        color: #333;
                    }
                }
                .span5{
                    font-size: 12px;
                    color: #333;
                }
            }
        }
    }
}
</style>
